<template>
  <div class="mobiellogin">
    <section>
      <div style="width: 12rem; min-width: 900px">
        <div class="mobiellogin_logo"></div>
      </div>
      <!-- 验证码登录 -->
      <div v-if="!isScanning" class="mobiellogin_content">
        <div class="logo"></div>
        <div class="title">欢迎登录</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="phone">
            <el-row
              class="user"
              type="flex"
              align="middle"
              justify="space-between"
            >
              <el-input
                style="width: 90%"
                v-model="ruleForm.phone"
                placeholder="请输入手机号"
              ></el-input>
              <div
                v-if="clear"
                class="clear"
                @click="ruleForm.phone = ''"
              ></div>
            </el-row>
          </el-form-item>
          <el-form-item prop="code">
            <el-row
              class="code"
              type="flex"
              justify="space-between"
              align="middle"
            >
              <el-input
                style="width: 2.3rem"
                v-model="ruleForm.code"
                placeholder="请输入验证码"
              ></el-input>
              <div
                v-if="passwordClear"
                class="clear"
                @click="ruleForm.code = ''"
              ></div>
              <div
                :style="{ opacity: codeStaus }"
                v-if="timer === 60"
                class="rcode"
                @click="handleCode"
              >
                获取验证码
              </div>
              <div :style="{ opacity: codeStaus }" v-else class="rcode">
                重新获取{{ timer }}}
              </div>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="space-between">
              <div
                :style="{ opacity: submitStaus }"
                class="submit"
                @click.enter="submit('ruleForm')"
              >
                登录
              </div>
              <!-- <div class="scode" @click="toScanning">
                <img src="../../../assets/images/组 18@2x.png" alt="">
              </div> -->
            </el-row>
          </el-form-item>
        </el-form>
        <div class="mode">
          <span>
            <router-link to="/password"> 密码登录 </router-link>
          </span>
          <span>|</span>
          <span @click="handleRegister"> 注册 </span>
        </div>
      </div>
      <!-- 微信扫码 -->
      <div v-else class="mobiellogin_content">
        <!-- <div class="scanning"></div> -->
        <iframe
          ref="iframeRef"
          class="code-iframe"
          scrolling="no"
          :src="wxCode"
        >
        </iframe>
        <!-- <div class="wecat-txet">
          <p>请使用微信扫描二维码登录「 家巴啦商户平台 」</p>
        </div> -->
        <div class="scanning-mode">
          <span @click="isScanning = false">短信登录</span>
          <span>|</span>
          <span>
            <router-link to="/password"> 密码登录 </router-link>
          </span>
          <span>|</span>
          <span @click="handleRegister"> 注册 </span>
        </div>
      </div>
    </section>
    <jblFooter />
  </div>
</template>

<script>
import jblFooter from "@/views/login/compoents/jblFooter";
import { selectOrgAuditList, selectAllList } from "@/api/common";
import { sendCode, loginByPhoneAndCode, getRedirectUrl } from "@/api/user";

export default {
  name: "MobileLogin",
  components: {
    jblFooter,
  },
  inject: ["reload"],
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      isScanning: false,
      wxCode: "",
      timer: 60,
      clear: false,
      passwordClear: false,
      ruleForm: {
        phone: "",
        code: null,
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: "change" }],
        code: [{ required: true, message: "请输入验证码", trigger: "change" }],
      },
    };
  },
  watch: {
    $route(to, from) {
      console.log(to.path, from.path);
      this.reload();
    },
    "ruleForm.phone"(val) {
      this.clear = val.length > 0;
    },
    "ruleForm.code"(val) {
      this.passwordClear = val.length > 0;
    },
  },
  computed: {
    codeStaus() {
      return this.ruleForm.phone.length === 11 ? 1 : 0.5;
    },
    submitStaus() {
      return this.ruleForm.phone && this.ruleForm.code ? 1 : 0.5;
    },
  },
  beforeRouteLeave(to, form, next) {
    // this.isScanning = false
    next();
  },
  created() {},
  mounted() {
    window.addEventListener("keydown", this.keyDown);
  },
  methods: {
    handleCode() {
      this.$refs["ruleForm"].validateField("phone", (err) => {
        if (err) {
          return false;
        } else {
          sendCode({
            phone: this.ruleForm.phone,
          }).then((res) => {
            this.$message({
              message: "验证码已发送",
              type: "success",
            });
            this.timer = 59;
            const time = setInterval(() => {
              this.timer--;
              if (this.timer <= 0) {
                clearInterval(time);
                this.timer = 60;
              }
            }, 1000);
          });
        }
      });
    },
    async submit(formName) {
      let confirm = false;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          confirm = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      if (!confirm) return;
      const res = await loginByPhoneAndCode(this.ruleForm);
      if (res.data.auditStatus === 2) {
        await this.$store.dispatch("user/login", res.data);
        const busiesList = await selectAllList();
        await this.$store.dispatch("user/changeRoles", busiesList.data[0]);
        TDAPP.onEvent("验证码登录");
        this.$router.push("/home");
      } else {
        await this.$store.dispatch("user/login", res.data);
        this.$router.push("/register");
      }
    },
    toScanning() {
      this.isScanning = true;
      getRedirectUrl().then((res) => {
        this.wxCode = `${res.data}&self_redirect=false`;
        console.log(location, this.$refs.iframeRef, "this.$refs.iframeRef");
      });
    },
    handleRegister() {
      this.$store.dispatch("user/resetToken");
      this.$router.push("/register");
    },
    keyDown(e) {
      // 如果是回车则执行登录方法
      if (e.keyCode === 13) {
        this.submit("ruleForm");
      }
    },
  },
  // 离开当前页面后执行
  destroyed: function () {
    this.$store.dispatch("user/removewxUserInfo");
  },
};
</script>
<style lang="scss" scoped>
.mobiellogin {
  width: 100%;
  min-width: 1000px;
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  background: rgba(247, 248, 252, 1);
  opacity: 1;
  section {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  &_logo {
    margin: 0.8rem 0 0.2rem;
    width: 2.2rem;
    height: 0.54rem;
    min-width: 110px;
    min-height: 22px;
    background-image: url("../../../assets/images/jbllogo.png");
    background-size: 100% 100%;
    background-position: center;
  }
  &_content {
    width: 12rem;
    height: 6.92rem;
    min-width: 900px;
    min-height: 500px;
    border-radius: 10px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    .logo {
      width: 1.24rem;
      height: 1.24rem;
      background-image: url("../../../assets/images/logo.png");
      background-size: 100% 100%;
      background-position: center;
    }
    .title {
      margin: 0.2rem 0 0.38rem;
      font-size: 0.36rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(78, 92, 101, 1);
      opacity: 1;
    }
    .user {
      width: 4.32rem;
      height: 0.7rem;
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border-radius: 8px;
    }
    .code {
      width: 4.32rem;
      height: 0.7rem;
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border-radius: 8px;
      .rcode {
        cursor: pointer;
        margin-right: 0.08rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.4rem;
        height: 0.54rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        background: #16dbcc;
        opacity: 0.5;
        border-radius: 6px;
      }
    }
    /deep/.el-input__inner {
      height: 0.7rem;
      font-size: 0.24rem;
      font-family: SF UI Display;
      font-weight: bold;
      color: rgba(78, 92, 101, 1);
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border: none;
      border-radius: 0.08rem;
      &::-webkit-input-placeholder {
        /* WebKit browsers */
        font-size: 0.2rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(217, 220, 227, 1);
      }
    }
    .submit {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 0.7rem;
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      background: #16dbcc;
      opacity: 0.5;
      box-shadow: 0px 10px 25px rgba(22, 219, 204, 0.15);
      border-radius: 8px;
      transition: 0.7s ease-in-out;
    }
    .scode {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.7rem;
      height: 0.7rem;
      background: rgba(220, 250, 248, 1);
      opacity: 0.5;
      border-radius: 8px;
      img {
        width: 0.37rem;
        height: 0.37rem;
        object-fit: cover;
      }
    }
  }
  .mode {
    width: 4.32rem;
    font-size: 0.16rem;
    font-weight: 600;
    color: #4e5c65;
    opacity: 1;
    span {
      cursor: pointer;
    }
    span:nth-of-type(2) {
      margin: 0 0.3rem;
    }
  }
  .clear {
    cursor: pointer;
    margin-right: 0.2rem;
    width: 0.24rem;
    height: 0.24rem;
    background-image: url("../../../assets/images/组 19@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
  .scanning {
    width: 2.2rem;
    height: 2.2rem;
    background-image: url("../../../assets/images/商户端PC端-登录账户-扫码@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
  .wecat-txet {
    width: 2.88rem;
    text-align: center;
    font-size: 0.24rem;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 0.36rem;
    color: rgba(78, 92, 101, 1);
    opacity: 1;
  }
  .scanning-mode {
    margin-top: 0.2rem;
    display: flex;
    justify-content: space-between;
    height: 0.22rem;
    font-size: 0.16rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(179, 185, 199, 1);
    opacity: 1;
    span {
      cursor: pointer;
    }
    span:nth-of-type(2),
    span:nth-of-type(4) {
      margin: 0 0.3rem;
    }
  }
}
.code-iframe {
  width: 300px;
  height: 400px;
  border: none;
  overflow-y: hidden;
}
</style>
